<template>
  <view>
    <u-popup mode="center" round="5rpx" :show="show" @close="close" @open="open">
      <view class="popup-content">
        <view :class="['icon', config.type]" v-if="config.showIcon">
          <u-icon v-if="config.type == 'fail'" name="close" size="30rpx" color="white"></u-icon>
          <u-icon v-else name="checkbox-mark" size="30rpx" color="white"></u-icon>
        </view>
        <text class="title">{{ config.title }}</text>
        <view class="content">
          <slot :result="config">{{ config.content }}</slot>
        </view>
        <view class="btns">
          <view v-if="closeConfig.autoClose && closeHaveTime > 0" class="close-text">{{ closeHaveTime }}s后自动关闭</view>
          <slot name="confirm" :config="config">
            <view class="btns-item" @click="confirm">
              <text class="btns-item-txt">
                {{ config.confirmText }}
              </text>
            </view>
          </slot>
        </view>
      </view>
    </u-popup>
  </view>
</template>
<script setup>
import { computed, nextTick, onBeforeUnmount, reactive, ref } from "vue";

const props = defineProps({
  showIcon: {
    type: Boolean,
    default: true,
  },
});

const config = ref({
  title: "成功",
  confirmText: "关闭",
  content: "",
  showIcon: props.showIcon,
  type: "success", // 窗口类型 success/fail/warning
});

// 自动关闭
const closeConfig = reactive({
  interval: null,
  closeAfter: 10000,
  haveTime: 0,
  autoClose: true,
});

const closeHaveTime = computed(() => {
  return closeConfig.haveTime / 1000;
});

const show = ref(false);
const open = (data) => {
  // console.log("open", data);
  if (data) {
    config.value = { ...config.value, ...data };
    // 默认不自动关闭弹窗，如果传入了 autoClose 或 closeInAfter 则自动关闭
    if (data.autoClose === true) closeConfig.autoClose = true;
    else if (data.closeInAfter > 1000) closeConfig.autoClose = true;
    else closeConfig.autoClose = false
    if (data.closeInAfter) closeConfig.closeAfter = data.closeInAfter;
    else closeConfig.closeAfter = 10000;
    if (data.title) closeConfig.title = data.title;
    if (!data.content) closeConfig.content = "";

    // 如果没传入 showIcon ,应根据 props 决定是否显示图标
    if (data.showIcon === undefined) config.value.showIcon = props.showIcon;
    // if (data.confirmText) closeConfig.confirmText = data.confirmText;
    // 如果未传类型， 默认是成功类型 （减少多个方式使用同一个组件实例的情况，实际情况建议分开不同逻辑的弹窗组件）
    if (!data.type) config.value.type = "success";
  }
  show.value = true;
  if (closeConfig.autoClose) {
    closeConfig.haveTime = closeConfig.closeAfter;
    // 如果定时器有数据，先清除
    if (closeConfig.interval) clearInterval(closeConfig.interval);
    closeConfig.interval = setInterval(() => {
      closeConfig.haveTime -= 1000;
      // console.log("close interval", closeConfig);
      if (closeConfig.autoClose && closeConfig.haveTime <= 0) {
        clearInterval(closeConfig.interval);
        closeConfig.interval = null;
        close();
      }
    }, 1000);
  }
};
const close = (type) => {
  show.value = false;
  // 关闭定时器 (除了 onBeforeUnmount ，主动关闭也需要清除，因为主动关闭并不会销毁组件)
  clearInterval(closeConfig.interval);
  closeConfig.interval = null;
  console.log("on close ...🧹");
  // 如果有自定义的关闭事件，则执行关闭事件
  if (config.value.onClose && typeof config.value.onClose === "function") {
    try {
      config.value.onClose(type);
    } catch (error) {
      console.log("onClose error", error);
    }
  }
};

const confirm = () => {
  emits("confirm", config.value);
  close();
  if (config.value.onConfirm && typeof config.value.onConfirm === "function") {
    try {
      config.value.onConfirm(config.value);
    } catch (error) {
      console.error("onConfirm error", error);
    }
  }
};

defineExpose({ open, close });

const emits = defineEmits(["confirm", "cancel"]);

onBeforeUnmount(() => {
  clearInterval(closeConfig.interval);
  closeConfig.interval = null;
  console.log("onBeforeUnmount ...🧹");
});
</script>

<style scoped lang="scss">
.popup-content {
  padding: 20rpx;
  min-width: 260rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .icon {
    background-color: $uni-color-success;
    padding: 6rpx;
    border-radius: 50%;
    margin-bottom: 10rpx;

    &.fail {
      background-color: $uni-color-error;
    }
    &.success {
      background-color: $uni-color-success;
    }
    &.info {
      background-color: grey;
    }
  }

  .title {
    font-weight: bold;
  }

  .content {
    text-align: center;
    margin-top: 10rpx;
    max-height: 60vh;
    max-width: 100%;
    overflow: scroll;
  }

  .textarea {
    width: 80%;
    margin: 10rpx 0rpx;

    ::v-deep .u-textarea__field {
      font-size: 13rpx;
    }
  }

  .btns {
    display: flex;
    flex-direction: column;
    width: fit-content;
    justify-content: center;
    align-items: center;
    margin-top: 20rpx;

    .close-text {
      font-size: 10rpx;
      color: #909399;
      padding: 10rpx;
    }

    .btns-item {
      background-color: #efefef;
      padding: 5rpx 20rpx;
      border-radius: 5rpx;
      margin: 0rpx 15rpx;
      font-size: 12rpx;

      .btns-item-txt {
        font-size: 10rpx;
        padding: 5rpx 15rpx;
      }

      ::v-deep .u-button {
        padding: 2rpx 20rpx;
      }
    }
  }
}
</style>
